<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>优孕妈妈千人计划</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .top_bg {
        width: 100%;
        position: relative;
    }

    .top_bg img {
        width: 100%;
    }

    .QAtext {
        position: absolute;
        top: 2.6rem;
        width: 100%;
        font-size: 0.5rem;
        text-align: center;
    }

    .question {
        font-size: 1rem;
        color: #fff;
        font-family: 'PingFangSC-Medium';
    }

    .helpful {
        position: absolute;
        width: 100%;
        top: 4.5rem;
    }

    .help-box {
        background: #fff;
        border-radius: 8px;
        margin: .6rem .4rem;
        box-shadow: 0px 2px 54px 0px rgba(181, 172, 174, 0.23);
        text-align: center;

    }

    .tips-box {
        position: relative;
        overflow: hidden;
        height: 6rem;
    }

    .tips-box span {
        position: absolute;
        display: inline-block;
        font-size: .6rem;
        border-radius: 24px;
        padding: 0 .4rem;
        color: #fff;
        line-height: 1rem;
        height: 1rem;
    }

    .tips-1 {
        top: 3rem;
        left: .1rem;
        background: rgba(214, 121, 255, 0.8);
        box-shadow: 0px 8px 15px 0px rgba(214, 121, 255, 0.16);
    }

    .tips-2 {
        top: 1rem;
        left: 2rem;
        background: rgba(255, 95, 124, 0.5);
        box-shadow: 0px 8px 15px 0px rgba(255, 95, 124, 0.16);
    }

    .tips-3 {
        top: 2.5rem;
        left: 5rem;
        background: rgba(214, 121, 255, 0.5);
        box-shadow: 0px 8px 15px 0px rgba(214, 121, 255, 0.16);
    }

    .tips-4 {
        top: 4.2rem;
        left: 6.5rem;
        background: rgba(255, 95, 124, 0.8);
        box-shadow: 0px 8px 15px 0px rgba(255, 95, 124, 0.16);
    }

    .tips-5 {
        top: 1rem;
        left: 10rem;
        background: rgba(255, 95, 124, 0.8);
        box-shadow: 0px 8px 15px 0px rgba(255, 95, 124, 0.16);
    }

    .tips-6 {
        width: 5rem;
        top: 2.8rem;
        left: 10.8rem;
        background: rgba(255, 95, 124, 0.5);
        box-shadow: 0px 8px 35px 0px rgba(255, 95, 124, 0.16);
    }

    .help-tips {
        padding: .4rem 0;
    }

    .help-tips p {
        color: #6A595D;
        font-size: .7rem
    }

    .height {
        height: 6rem;
    }

    .curve {
        position: absolute;
        width: 100%;
        top: 14rem;
    }

    .curve-box {
        background: #fff;
        border-radius: 8px;
        margin: .6rem .4rem;
        padding: .8rem .4rem;
        box-shadow: 0px 2px 54px 0px rgba(181, 172, 174, 0.23);
        text-align: center;
    }

    .curve-tips {
        padding-top: .3rem;
    }

    .curve-tips p {
        color: #6A595D;
        font-size: .7rem
    }


    .btn {
        padding: 0.5rem 1rem;
    }

    .btn span {
        display: block;
        color: #fff;
        text-align: center;
        font-size: .7rem;
        padding: .5rem 0;
        background: linear-gradient(11deg, rgba(255, 95, 124, 1), rgba(214, 121, 255, 0.8));
        box-shadow: 0px 8px 29px 0px rgba(255, 95, 124, 0.41);
        border-radius: 4px;

    }

    .unbtn span {
        background: none;
        background-color: darkgray;
        box-shadow: none;
    }

    .tips {
        text-align: center;
    }

    .top-tips {
        padding: 0 0.8rem;
        font-size: .6rem;
        color: #FF5F7C;
        text-align: center;
    }

    .tips_text {
        margin-bottom: 0.5rem;
        padding: 0 0.8rem;
        display: inline-block;
        font-size: .2rem;
        color: #C1B6B9;
        background-size: .7rem;
        background-position: 0.2rem;
    }
</style>

<body>
    <div class="top_bg">
        <img src="./img/bg.png" alt="">
        <div class="QAtext">
            <p class="question">什么是优孕妈妈千人计划？</p>
        </div>
        <div class="helpful">
            <div class="help-box">
                <div class="tips-box">
                    <span class="tips-1">
                        是时间同房了
                    </span>
                    <span class="tips-2">
                        佑蜜值激增了
                    </span>
                    <span class="tips-3">
                        怀孕几率大吗？
                    </span>
                    <span class="tips-4">
                        优孕时刻来了
                    </span>
                    <span class="tips-5">
                        怎么看懂佑蜜值
                    </span>
                    <span class="tips-6">
                        我已经怀上了吗？
                    </span>
                </div>
                <div class="help-tips">
                    <p>
                        每一个关于备孕的疑问
                    </p>
                    <p>
                        都能获得一对一帮助保障
                    </p>
                </div>
            </div>
        </div>
        <div class="curve">
            <div class="curve-box">
                <img src="./img/curve.png" alt="">
                <div class="curve-tips">
                    <p>每一次异常的波动数据</p>
                    <p>都能得到专家实时分析及客服回复</p>
                </div>
            </div>
        </div>
    </div>
    <div class="height">


    </div>
    <div class="top-tips">
        <span>
            限定1000位备孕妈妈参与.参与者免费成为高级会员
        </span>
    </div>

    <div class="btn">
        <span>同意并参与计划</span>
    </div>

    <div class="tips">
        <span class="tips_text">
            佑蜜将获取你的联系电话；专家团队一对一分析身体数据波动。
            <p>客服电话提醒回访。</p>
        </span>
    </div>

    <script src="./js/zepto.js"></script>
    <script src="./js/event.js"></script>
    <script src="./js/touch.js"></script>
    <script src="./js/ajax.js"></script>
    <script type="text/javascript">
        (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);

        })(document, window);


        Zepto(function ($) {
            const http = window.location.href;

            function getUrlParam(url, name) {
                let pattern = new RegExp("[?&]" + name + "\=([^&]+)", "g");
                let matcher = pattern.exec(url);
                let items = null;
                if (matcher != null) {
                    try {
                        items = decodeURIComponent(decodeURIComponent(matcher[1]));
                    } catch (e) {
                        try {
                            items = decodeURIComponent(matcher[1]);
                        } catch (e) {
                            items = matcher[1];
                        }
                    }
                }
                return items;
            }

            $('.btn').bind('tap', function () {
                const url = 'http://139.224.236.31:8888/ovuola/activity/record';
                const data = {};
                data.userId = Number(getUrlParam(http, 'userId'));
                data.activityCode = Number(getUrlParam(http, 'activityCode'));
                data.status = 0;

                $.ajax({
                    type: 'POST',
                    url: url,
                    data: data,
                    success: function (res) {
                        res = JSON.parse(res);
                        if (res.status == "200") {
                            alert("报名成功")
                            $('.btn').unbind('tap');
                            $('.btn').addClass('unbtn');
                        } else {
                            alert(res.msg)
                        }
                    }
                })
            })

        });
    </script>
</body>

</html>